<template>
  <card title="个人数据" :width="1120">
    <div class="container">
      <div class="top_content">
        <div class="top_content_left">
          <div class="login_day">
            登录天数
            <div
              class="login_day_num"
              v-for="(item, index) in studyData.loginDateNum"
              :key="index"
            >
              {{ item }}
            </div>
            天
          </div>
          <div class="online_time" style="margin-top: 59px !important">
            <div class="online_time_icon"></div>
            <div class="online_time_txt">
              在学课程数量：{{ studyData.studyCourse }}
            </div>
          </div>
          <div class="online_time">
            <div class="online_time_icon"></div>
            <div class="online_time_txt">
              已学课程数量：{{ studyData.finishCourse }}
            </div>
          </div>
          <div class="online_time">
            <div class="online_time_icon"></div>
            <div class="online_time_txt">
              课程学习总时长：{{ studyData.studyTime | formateMin }}时
            </div>
          </div>
          <div class="online_time">
            <div class="online_time_icon"></div>
            <div class="online_time_txt">
              选学内容数量：{{ studyData.finishChooseNum }}
            </div>
          </div>
        </div>
        <div class="top_content_right">
          <div class="title_mid">每日完成内容</div>
          <div class="dailyCompletion" ref="dailyCompletion"></div>
        </div>
      </div>
      <div class="bottom_content">
        <div class="bottom_content_left">
          <div class="search_all">
            <div class="title flex">
              学习成果
              <img
                class="shou fullScreen"
                src="@/assets/images/studyResults/quanping.png"
                alt="加载失败"
                @click="fullScreen"
              />
            </div>
            <div style="display: flex; align-items: center">
              <el-select
                class="search"
                v-model="model.semesterId"
                placeholder="请选择学期"
              >
                <el-option
                  v-for="item in semesterOption"
                  :key="item.semesterId"
                  :label="item.semesterName"
                  :value="item.semesterId"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                style="margin-left: 10px"
                class="search"
                v-model="model.courseName"
                placeholder="请输入课程"
                clearable
              ></el-input> -->
              <el-select
                style="margin-left: 10px"
                filterable
                clearable
                class="search"
                v-model="model.courseId"
                placeholder="请选择课程"
              >
                <el-option
                  v-for="item in courses"
                  :key="item.courseId"
                  :label="item.courseName"
                  :value="item.courseId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 学习成果 -->
          <studyResultByTime
            num="4"
            size="mini"
            ref="studyResultByTimeDia"
            height="300px"
          ></studyResultByTime>
          <!-- 学习成果弹窗 -->
          <el-dialog
            top="1vh"
            title="学习成果"
            width="960px"
            :visible.sync="studyResultByTime_open"
          >
            <studyResultByTime
              num="5"
              ref="studyResultByTimeDia_fullScreen"
            ></studyResultByTime>
            <div slot="footer" class="dialog-footer flexEnd">
              <el-button type="primary" @click="studyResultByTime_open = false"
              >关 闭
              </el-button
              >
            </div>
          </el-dialog>
          <!-- <div class="course_table">
            <el-table
              :data="courseData"
              v-loading="loading"
              height="240"
              border
            >
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="courseName"
                label="课程名称"
              ></el-table-column>
              <el-table-column align="center" width="62" label="类型">
                <template slot-scope="scope">
                  {{ typeObj[scope.row.type] }}
                </template>
              </el-table-column>
              <el-table-column align="center" width="62" label="学分">
                <template slot-scope="scope">
                  {{ scope.row.credit ? scope.row.credit : "--" }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                width="102"
                label="总学习时长"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.min"
                    >{{ scope.row.min | formateMin }}时</span
                  >
                  <span v-if="!scope.row.min">--</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="102" label="平均考核成绩">
                <template slot-scope="scope">
                  {{ scope.row.avgScore ? scope.row.avgScore : "--" }}
                </template>
              </el-table-column>
              <el-table-column align="center" width="102" label="操作">
                <template slot-scope="scope">
                  <el-link
                    @click="routeTurn(scope.row)"
                    :underline="false"
                    type="primary"
                    >详情</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div> -->
        </div>
        <div class="bottom_content_right">
          <div class="turn_total">
            <i
              @click="turnLeft"
              class="el-icon-d-arrow-left"
              :class="{ prohibited: nowIndex <= 0 }"
            ></i>
            <div class="text">{{ nowStuEvaluateName }}</div>
            <i
              @click="turnRight"
              class="el-icon-d-arrow-right"
              :class="{ prohibited: stuEvaluateList.length - 1 <= nowIndex }"
            ></i>
          </div>
          <div class="creditDetails" ref="creditDetailsRef"></div>
        </div>
      </div>
    </div>
  </card>
</template>

<script>
import StudyResultByTime from '@/components/studyResultByTime.vue'
import {
  getStudentEvaluateList,
  getRadarData
} from '@/api/mine/mine'
import { daily, getStudyData, getAllCourseList } from '@/api/home'
import * as echarts from 'echarts'
import { getSchoolSemesterList } from '@/api/schoolSemester/schoolSemester'

export default {
  name: 'personalData',
  components: { StudyResultByTime },
  props: {},
  data() {
    return {
      loading: false,
      info: {},
      semesterOption: [],
      typeObj: {
        0: '必修',
        1: '选修',
        2: '考证',
        3: '工学'
      },
      sdisciplineTypeOption: [
        {
          id: 0,
          name: '必修'
        },
        {
          id: 1,
          name: '选修'
        },
        {
          id: 2,
          name: '考证'
        },
        {
          id: 3,
          name: '工学'
        }
      ],
      classFinishTaskCountData: [],
      studentFinishTaskCountData: [],
      stuEvaluateList: [],
      nowStuEvaluateName: '',
      nowStuEvaluateId: '',
      dateList: [],
      classAllCredit: 0,
      stuAllCredit: 0,
      nowIndex: 0,
      studyData: {},
      courseData: [],
      indicator: [],
      dataValue: [],
      model: {
        courseId: '',
        semesterId: '',
        type: ''
      },
      studyResultByTime_open: false,
      courses: []
    }
  },
  filters: {
    formateMin(val) {
      if (!val) {
        return '0'
      }
      let hour = val / 60
      return Math.ceil(hour * 100) / 100
    }
  },
  watch: {
    model: {
      handler(val) {
        console.log('model', val)
        this.$refs.studyResultByTimeDia.getALLresult(
          { type: 'mine', studentId: this.$store.getters.studentId },
          val
        )
        // this.getCourseData()
        this.learningCourseList()
      },
      deep: true
    }
  },
  methods: {
    //获取学期列表
    async getSemesterList() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.semesterOption = rows
      }
      this.model.semesterId = this.$store.getters.schoolInfo.semesterId
    },
    /* 获取课程列表 */
    async learningCourseList() {
      let res = await getAllCourseList(this.$store.getters.studentId, { semesterId: this.model.semesterId })
      this.courses = res.data
    },
    fullScreen() {
      this.studyResultByTime_open = true
      this.$nextTick(() => {
        this.$refs.studyResultByTimeDia_fullScreen.getALLresult(
          {
            type: 'mine',
            studentId: this.$store.getters.studentId
          },
          this.model
        )
      })
    },
    async getStudentEvaluateList() {
      let params = {
        schoolId: this.$store.getters.schoolId
      }
      console.log(params)
      let res = await getStudentEvaluateList(params)
      const { code, data } = res
      if (code == 200) {
        this.stuEvaluateList = data.filter((item) => {
          return item.paramList.length > 2
        })
        this.nowStuEvaluateName = data[0].name
        this.nowStuEvaluateId = data[0].id
        this.nowIndex = 0
        this.getRadarData(this.nowStuEvaluateId)
      }
    },
    turnLeft() {
      if (this.nowIndex <= 0) {
        return
      }
      this.nowIndex--
      this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].name
      this.nowStuEvaluateId = this.stuEvaluateList[this.nowIndex].id
      this.getRadarData(this.nowStuEvaluateId)
    },
    turnRight() {
      if (this.nowIndex >= this.stuEvaluateList.length - 1) {
        return
      }
      this.nowIndex++
      this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].name
      this.nowStuEvaluateId = this.stuEvaluateList[this.nowIndex].id
      this.getRadarData(this.nowStuEvaluateId)
    },
    async getRadarData(id) {
      let res = await getRadarData(id)
      const { code, data } = res
      if (code == 200) {
        if (data && data.length > 0) {
          let arr = []
          let dataValue = []
          data.forEach((value) => {
            let obj = {
              text: value.name,
              max: 110
            }
            dataValue.push(value.studentScore)
            arr.push(obj)
          })
          this.indicator = arr
          this.dataValue = dataValue
        }
      }
      this.setCreditOption()
    },
    async getStudyData() {
      let res = await getStudyData()
      const { code, data } = res
      if (code == 200) {
        this.studyData = data
        let loginDateString = data.loginDateNum + ''
        if (loginDateString.length < 4) {
          if (loginDateString.length == 1) {
            this.studyData.loginDateNum = '000' + data.loginDateNum
          }
          if (loginDateString.length == 2) {
            this.studyData.loginDateNum = '00' + data.loginDateNum
          }
          if (loginDateString.length == 3) {
            this.studyData.loginDateNum = '0' + data.loginDateNum
          }
        } else {
          this.studyData.loginDateNum = data.loginDateNum + ''
        }
      }
    },
    async getDaily() {
      let res = await daily()
      const { code, data } = res
      if (code == 200) {
        this.classFinishTaskCountData =
          data.studentFinishTaskCountData.series[0].data
        this.studentFinishTaskCountData =
          data.classFinishTaskCountData.series[0].data
        this.dateList = data.classFinishTaskCountData.xAxis.data
        this.setOptionCdn()
      }
    },
    setOptionCdn() {
      let myChart = echarts.init(this.$refs.dailyCompletion)
      let option
      option = {
        color: ['#e925b5', '#46dfff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#666666',
              backgroundColor: 'white'
            }
          }
        },
        legend: {
          right: '3%',
          data: ['个人完成内容数量', '班级平均完成内容数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dateList,
            boundaryGap: false, // 不留白，从原点开始
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#f6f7f9', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#666666' //坐标值得具体的颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#f6f7f9', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value}', //显示数据带上h
              textStyle: {
                color: '#666666' //坐标值得具体的颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#f6f7f9'],
                width: 1,
                type: 'solid'
              }
            } //去除网格线
          }
        ],
        series: [
          {
            name: '个人完成内容数量',
            type: 'line',
            symbol: 'none',
            smooth: true,
            lineStyle: {
              width: 2
            },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: '#e925b5',
                    fontsize: '16'
                  },
                  formatter: '{c}' //显示数据带上h
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.classFinishTaskCountData
          },
          {
            name: '班级平均完成内容数量',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              width: 2
            },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: '#46dfff',
                    fontsize: '16'
                  },
                  formatter: '{c}' //显示数据带上h
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.studentFinishTaskCountData
          }
        ]
      }
      option && myChart.setOption(option)
    },
    setCreditOption() {
      let myChart = echarts.init(this.$refs.creditDetailsRef)
      let option
      option = {
        color: ['#2754F3', '#28B28B'],
        tooltip: {
          trigger: 'axis'
        },
        radar: [
          {
            indicator: this.indicator,
            center: ['50%', '50%'],
            radius: 100
          }
        ],
        series: [
          {
            type: 'radar',
            symbolSize: 0,
            tooltip: {
              trigger: 'item'
            },
            data: [
              {
                value: this.dataValue,
                name: this.nowStuEvaluateName,
                lineStyle: {
                  width: 1
                },
                areaStyle: {
                  color: 'rgba(39, 84, 243, 0.2)'
                }
              }
            ],
            label: {
              show: true,
              formatter: function(params) {
                return params.value
              },
              color: '#2754F3'
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  },
  created() {
    this.learningCourseList()
    this.getSemesterList()
    this.getStudyData()
  },
  mounted() {
    this.getDaily()
    this.getStudentEvaluateList()
  }
}
</script>
<style scoped lang="scss">
.fullScreen {
  margin: 5px 0 0 5px;
  width: 15px;
  height: 15px;
}

.container {
  width: 100%;
  padding: 24px 22px 0 32px;
  box-sizing: border-box;
  height: calc(100vh - 68px - 18px - 105px);
  overflow: auto;

  .top_content {
    width: 100%;
    display: flex;
    align-items: center;

    &_left {
      width: 376px;
      height: 312px;
      background-image: url("../../../assets/images/onces_login_bg.png");
      background-size: 100% 100%;
      border-radius: 16px;
      padding: 36px 32px;
      box-sizing: border-box;

      .login_day {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
        font-weight: 600;
        color: #333333;

        &_num {
          width: 24px;
          height: 32px;
          background-image: url("../../../assets/images/number_bg.png");
          background-size: cover;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 6px;
        }

        &_num:last-child {
          margin-right: 6px;
        }
      }

      .online_time {
        display: flex;
        align-items: center;
        margin-top: 16px;

        &_icon {
          width: 8px;
          height: 8px;
          background: #28b28b;
          border-radius: 1px;
        }

        &_txt {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #666666;
          margin-left: 7px;
        }
      }
    }

    &_right {
      width: 674px;
      height: 312px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #ebebeb;
      margin-left: 16px;
      position: relative;
      padding-top: 32px;
      box-sizing: border-box;

      .dailyCompletion {
        width: 100%;
        height: 100%;
      }

      .title_mid {
        position: absolute;
        top: 32px;
        left: 32px;
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
        font-weight: 600;
        color: #333333;
      }
    }
  }

  .bottom_content {
    display: flex;
    align-items: center;
    margin-top: 16px;

    &_left {
      width: 640px;
      height: 375px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #ebebeb;
      padding: 10px 32px 10px 32px;
      box-sizing: border-box;

      .search_all {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
        }

        .search {
          width: 160px;
          height: 40px;
        }

        .search_type {
          width: 120px;
          height: 40px;
          margin-left: 16px;
        }
      }

      .course_table {
        width: 100%;
        height: 250px;
        margin-top: 10px;
      }
    }

    &_right {
      width: 400px;
      height: 375px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #ebebeb;
      margin-left: 24px;
      padding: 32px;
      box-sizing: border-box;

      .turn_total {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-icon-d-arrow-left,
        .el-icon-d-arrow-right {
          color: #28b28b;
          font-size: 16px;
          cursor: pointer;
          user-select: none;
        }

        .text {
          font-size: 16px;
          margin: 0 20px;
        }
      }

      .creditDetails {
        width: 100%;
        height: 300px;
      }
    }
  }
}

::v-deep .el-table--group,
.el-table--border {
  border-radius: 10px;
}

.prohibited {
  cursor: not-allowed !important;
  opacity: 0.4;
}
</style>
